<template>
	<div id="img-convert">
		<div class="wapper">
			<div class="row">
				<div class="left">
					<el-card class="box-card">
						<div slot="header" class="card-header">
							<span>原料</span>
							<el-button size="mini" @click="selectFile">
								添加
								<input type="file" ref="input" style="display: none;" accept="image/*" multiple />
							</el-button>
						</div>
						<div class="list">
							<el-scrollbar style="height: 100%;">
								<div class="item" v-for="raw in rawList">
									<div class="img-box"><el-image :src="raw.url" :preview-src-list="rawImagePreview"></el-image></div>
									<div class="type">{{ getFileType(raw.file) }}</div>
									<div class="size">{{ getFileSize(raw.file) | formatSize }}</div>
									<div class="jd" v-if="raw.uploadJd !== undefined">{{ raw.uploadJd }}%</div>
								</div>
							</el-scrollbar>
						</div>
					</el-card>
				</div>
				<div class="middle">
					<el-form ref="form" :model="form" size="mini">
						<el-form-item label="转换成">
							<div class="acenter">
								<el-select v-model="form.fmt" placeholder="请选择"><el-option v-for="item in options" :key="item" :value="item"></el-option></el-select>
							</div>
						</el-form-item>
						<el-form-item label="图片质量">
							<div class="acenter"><el-input-number v-model="form.quality" :min="1" :max="1000" label="描述文字"></el-input-number></div>
						</el-form-item>
						<el-form-item label="缩放大小">
							<div class="acenter"><el-input-number v-model="form.scale" :min="1" :max="1000" label="描述文字"></el-input-number></div>
						</el-form-item>

						<el-form-item>
							<div class="acenter">
								<el-button v-if="processing" type="primary" :disabled="rawList.length === 0">转换中{{ total - rawList.length }}/{{ total }}</el-button>
								<el-button v-else type="primary" :disabled="rawList.length === 0" @click="start">转换</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div class="right">
					<el-card class="box-card">
						<div slot="header" class="card-header">
							<span>产品</span>
							<el-button size="mini" @click="downloadAll">一键下载</el-button>
						</div>
						<div class="list">
							<el-scrollbar style="height: 100%;">
								<div class="item" v-for="item in distList">
									<div class="img-box"><el-image :src="item.url"></el-image></div>
									<div class="type">{{ item.type }}</div>
									<div class="size">{{ item.size | formatSize }}</div>
									<div class="download" @click="downloadItem(item)">下载</div>
								</div>
							</el-scrollbar>
						</div>
					</el-card>
				</div>
			</div>
			<div v-if="failList.length">
				<el-table :data="failList" stripe style="width: 100%">
					<el-table-column label="图片" align="center" width="70">
						<template slot-scope="scope">
							<div class="img-box"><el-image :src="scope.row.url"></el-image></div>
						</template>
					</el-table-column>
					<el-table-column prop="data" label="data" width="180"></el-table-column>
					<el-table-column prop="msg" label="原因"></el-table-column>
					<el-table-column prop="type" label="类型"></el-table-column>
				</el-table>
				<div class="acenter" style="margin-top: 15px;"><el-button type="primary" @click="failList = []">清空失败列表</el-button></div>
			</div>
		</div>
	</div>
</template>

<script>
import { $get, $download } from '@/puigins/request.js';
export default {
	name: 'ImgConvert',
	data() {
		return {
			form: {
				fmt: '',
				file: null,
				quality: 100,
				scale: 100
			},
			options: [],
			rawList: [],
			distList: [],
			failList: [],
			total: 0,
			processing: false,
			opt: null
		};
	},
	methods: {
		getAvailableImgConvertType() {
			$get("/util/ImageConvert/getAvailableImgConvertType").then(res => {
				if (res.code == 200) {
					this.options = res.data;
					if (this.options && this.options.length) {
						this.form.fmt = this.options[0];
					}
				} else {
					this.$msgError(res);
				}
			});
		},
		getFileType(file) {
			return file.type;
		},
		getFileSize(file) {
			return file.size;
		},
		selectFile() {
			let input = this.$refs.input;
			input.onchange = e => {
				input.files.forEach(file => {
					let url = window.URL.createObjectURL(file);
					this.rawList.push({
						file,
						url
					});
				});
				input.value = null;
			};
			input.click();
		},
		start() {
			this.total = this.rawList.length;
			this.processing = true;
			this.rawList.forEach(item => {
				item.uploadJd = 0;
			});
			this.opt = Object.assign({}, this.form);
			this.startUpload(0, this.total);
		},
		startUpload(ind, all) {
			if (ind > all - 1) {
				this.processing = false;
				this.total = 0;
				return;
			}
			let obj = this.rawList[0];
			let file = obj.file;
			let form = Object.assign({}, this.opt);
			form.file = file;
			console.log(form);
			$download('/util/ImageConvert/covertImg', form, e => {
				// console.log(e);
			})
				.then(res => {
					console.log('covertImg', res);
					if (!res.code) {
						return this.$msgError(res);
					}

					let size = res.binary.size;
					let type = res.binary.type;
					let url = window.URL.createObjectURL(res.binary);
					if (res.code == 200 && size > 0) {
						this.distList.push({
							url,
							size,
							type,
							filename: form.file.name
						});
					} else {
						this.failList.push({
							url,
							size,
							type,
							msg: size == 0 ? '返回的图片大小为0' : res.msg,
							data: size == 0 ? 'size==0' : res.data,
							filename: form.file.name
						});
					}
					this.rawList.splice(0, 1);
					this.$nextTick(() => {
						this.startUpload(++ind, all);
					});
				})
				.catch(e => {
					this.startUpload(++ind, all);
					this.rawList.splice(0, 1);
				});
		},
		downloadItem(item) {
			console.log(item);
			const a = document.createElement('a');
			a.href = item.url;
			a.download = item.filename;
			a.click();
			// window.URL.revokeObjectURL(url);
		},
		downloadAll() {
			this.distList.forEach(this.downloadItem);
		}
	},
	filters: {
		formatSize(size) {
			if (size < 1024) return '<1KB';
			if (size / 1024 < 1024) return (size / 1024).toFixed(2) + 'KB';
			if (size / 1024 / 1024 < 1024) return (size / 1024 / 1024).toFixed(2) + 'MB';
			return (size / 1024 / 1024 / 1024).toFixed() + 'GB';
		},
		JDFormat(a) {
			return a > 100 ? 100 : a;
		}
	},
	created() {
		this.getAvailableImgConvertType();
	},
	computed: {
		rawImagePreview() {
			let arr = [];
			this.rawList.forEach(item => arr.push(item.url));
			return arr;
		}
	}
};
</script>

<style lang="scss">
#img-convert {
	.wapper {
		width: 80%;
		margin: 30px auto;
		.row {
			display: flex;
			justify-content: center;
			gap: 20px;
			.left,
			.right {
				width: 350px;
				.el-card__header {
					padding: 10px 20px;
				}
				.card-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.el-card__body {
					padding: 4px;
					padding-right: 0;
				}
				.list {
					height: 400px;
					.item {
						display: flex;
						align-items: center;
						gap: 10px;
						padding: 3px 0;
					}
				}
			}
			.middle {
				width: 150px;
				display: flex;
				align-items: center;
			}
			.img-box {
				width: 40px;
				height: 40px;
				.el-image {
					width: 100%;
					height: 100%;
					img {
						width: 100%;
						height: 100%;
					}
					.el-image__error {
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
